@import '~@hi-ui/core-css/lib/index.scss';

$panel-prefix: '#{$component-prefix}-collapse-panel' !default;
$icon-class: #{$panel-prefix}__icon !default;

.#{$panel-prefix} {
  font-size: use-text-size('normal');
  position: relative;
  z-index: 0;
  // border-bottom: use-border-size('normal') use-color-static('transparent');

  &::after {
    content: '';
    display: block;
    box-sizing: border-box;
    border-bottom: 1px solid use-color('gray', 200);

    .#{$component-prefix}-collapse--size-sm & {
      margin: 1px use-spacing(6);
    }

    .#{$component-prefix}-collapse--size-md & {
      margin: 1px use-spacing(8);
    }

    .#{$component-prefix}-collapse--size-lg & {
      margin: 1px use-spacing(10);
    }
  }

  &:last-of-type {
    border-radius: 0 0 use-border-radius('lg') use-border-radius('lg');
    overflow: hidden;

    &::after {
      border-bottom: none;
    }
  }

  &:first-of-type {
    border-radius: use-border-radius('lg') use-border-radius('lg') 0 0;
    overflow: hidden;
  }

  &__head {
    display: flex;
    align-items: center;
    color: use-color('gray', 700);
    cursor: pointer;

    .#{$component-prefix}-collapse--size-sm & {
      padding: use-spacing(5) use-spacing(6);
      font-weight: use-text-weight('medium');
    }

    .#{$component-prefix}-collapse--size-md & {
      padding: use-spacing(7) use-spacing(8);
      font-weight: use-text-weight('medium');
    }

    .#{$component-prefix}-collapse--size-lg & {
      padding: use-spacing(8) use-spacing(10);
      font-weight: use-text-weight('semibold');
    }

    &:focus {
      outline: none;
    }
  }

  &__title-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .#{$component-prefix}-collapse--size-md & {
      font-size: use-text-size('normal');
    }

    .#{$component-prefix}-collapse--size-lg & {
      font-size: use-text-size('lg');
      line-height: use-text-lineheight('lg');
    }
  }

  .#{$icon-class} {
    font-size: use-text-size('lg');
    color: use-color('gray', 600);
    line-height: 1em;

    // @animation
    transition-property: transform;
    transition-duration: use-motion-duration('normal');
    transition-timing-function: use-motion-bezier('normal');
    will-change: transform;

    &--left {
      margin-inline-end: use-spacing(3);
    }
  }

  &__extra {
    color: use-color('gray', 600);
  }

  &__content-wrapper {
    // @animation
    overflow: hidden;
    transition-property: height;
    transition-duration: use-motion-duration('normal');
    transition-timing-function: use-motion-bezier('normal');
    transform-origin: top;
    will-change: height;
  }

  &__content {
    color: use-color('gray', 700);

    .#{$component-prefix}-collapse--size-sm & {
      padding: 0 use-spacing(6) use-spacing(6);
    }

    .#{$component-prefix}-collapse--size-md & {
      padding: 0 use-spacing(8) use-spacing(8);
    }

    .#{$component-prefix}-collapse--size-lg & {
      padding: 0 use-spacing(10) use-spacing(10);
    }
  }

  &--show {
    &::after {
      background-color: use-color-static('transparent');
    }

    > .#{$panel-prefix}__head {
      .#{$icon-class} {
        &--left {
          transform: rotate(90deg);
        }

        &--right {
          transform: rotate(180deg);
        }
      }
    }
  }

  &--disabled {
    .#{$panel-prefix}__head {
      cursor: not-allowed;
      color: use-color('gray', 300);
    }
  }
}
